<template>
    <div class="page-container">
        <el-form :inline="true" size="medium" @submit.native.prevent>
            <el-form-item label="检测批次">
                <!-- <el-date-picker v-model="form.detectionBatch" type="year" format="yyyy年路网检测" value-format="yyyy年路网检测" :clearable="false" placeholder="请选择" :picker-options="datePickerOptions">
                </el-date-picker> -->
                <el-select v-model="form.detectionBatch" placeholder="请选择" clearable style="width: 100%">
                    <el-option v-for="d in detectionBatchOptions" :key="d.value" :label="d.label" :value="d.label" />
                </el-select>
            </el-form-item>
            <el-form-item label="交通量预测模型">
                <el-select v-model="form.trafficModel" placeholder="请选择" clearable style="width: 100%">
                    <el-option v-for="d in trafficoptions" :key="d.value" :label="d.label" :value="d.label" />
                </el-select>
            </el-form-item>
            <el-form-item label="选择决策项目">
                <el-select v-model="form.decisionItemId" placeholder="请选择" clearable style="width: 100%">
                    <el-option v-for="d in options" :key="d.value" :label="d.label" :value="d.value" />
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="养护方案">
                <el-select v-model="form.pavementType" placeholder="请选择" clearable style="width: 100%">
                    <el-option v-for="d in options" :key="d.value" :label="d.label" :value="d.label" />
                </el-select>
            </el-form-item> -->
            <el-form-item>
                <BaseButton v-permission="{ btnCode: 'dlyh_c58_d256_2' }" @click="handleFilter">分析</BaseButton>
            </el-form-item>
        </el-form>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="需求汇总" name="1"></el-tab-pane>
            <el-tab-pane label="养护质量" name="2"></el-tab-pane>
            <el-tab-pane label="各路线需求明细" name="3"></el-tab-pane>
            <el-tab-pane label="需求明细" name="4"></el-tab-pane>
        </el-tabs>
        <el-radio-group v-if="activeName==1 || activeName==3" v-model="tabSelected" style="margin: 0 0 30px 44%;" @change="getList">
            <el-radio-button label="1">里程</el-radio-button>
            <el-radio-button label="2">费用</el-radio-button>
        </el-radio-group>
        <el-form v-if="activeName==2" :inline="true" size="medium" @submit.native.prevent>
            <el-form-item label="公路">
                <!-- <AssetsRoadSelect :value.sync="subForm.highwayCode" clearable placeholder="请选择" /> -->
                <el-select v-model="highwayCode1" placeholder="请选择" filterable clearable style="width: 100%" @change="highwayCodeChange1">
                    <el-option v-for="item in highwayOptions" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
            </el-form-item>
            <el-form-item label="方向">
                <el-select v-model="subForm.direction" placeholder="请选择" clearable style="width: 100%">
                    <el-option v-for="item in DirectionOptions" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
            </el-form-item>
            <el-form-item label="车道">
                <el-select v-model="subForm.lane" placeholder="请选择" clearable style="width: 100%">
                    <el-option v-for="item in DrivewayTypeOptions" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
            </el-form-item>
            <el-form-item label="桩号范围">
                <el-row class="filter-stake total-stake">
                    <el-col :span="6" class="start-stake">
                        <el-input v-model="subForm.startStake1" clearable type="number" oninput="if(value.length > 3) value = value.slice(0, 3)" @keydown.native="onKeydown($event)">
                            <template slot="prepend">K</template>
                        </el-input>
                    </el-col>
                    <el-col :span="5" class="end-stake">
                        <el-input v-model="subForm.startStake2" clearable type="number" oninput="if(value.length > 3) value = value.slice(0, 3)" @keydown.native="onKeydown($event)">
                            <template slot="prepend">+</template>
                        </el-input>
                    </el-col>
                    <el-col :span="2" style="text-align:center;">~</el-col>
                    <el-col :span="6" class="start-stake">
                        <el-input v-model="subForm.endStake1" clearable type="number" oninput="if(value.length > 3) value = value.slice(0, 3)" @keydown.native="onKeydown($event)">
                            <template slot="prepend">K</template>
                        </el-input>
                    </el-col>
                    <el-col :span="5" class="end-stake">
                        <el-input v-model="subForm.endStake2" clearable type="number" oninput="if(value.length > 3) value = value.slice(0, 3)" @keydown.native="onKeydown($event)">
                            <template slot="prepend">+</template>
                        </el-input>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="技术指标">
                <el-select v-model="subForm.indicator" placeholder="请选择" style="width: 100%">
                    <el-option v-for="item in TechnicalIndexOptions" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <BaseButton v-permission="{ btnCode: 'dlyh_c58_d257_2' }" @click="handleFilter">查询</BaseButton>
                <BaseButton v-permission="{ btnCode: 'dlyh_c58_d257_2' }" type="second" @click="handleReset">重置</BaseButton>
            </el-form-item>
        </el-form>
        <el-form v-if="activeName==4" :inline="true" size="medium" label-width="78px" @submit.native.prevent>
            <el-form-item label="分析年度">
                <el-date-picker v-model="demandForm.analyseYear" type="year" format="yyyy" value-format="yyyy" :clearable="false" placeholder="请选择" :picker-options="datePickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="管养单位">
                <!-- <CustodyOrgSelect :value.sync="form.orgName" filterable clearable></CustodyOrgSelect> -->
                <el-select v-model="demandForm.orgName" placeholder="请选择" clearable style="width: 100%">
                    <el-option v-for="item in managementOfficeOptions" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
            </el-form-item>
            <el-form-item label="公路">
                <!-- <AssetsRoadSelect :value.sync="form.highwayCode" clearable placeholder="请选择" /> -->
                <el-select v-model="highwayCode" placeholder="请选择" filterable clearable style="width: 100%" @change="highwayCodeChange">
                    <el-option v-for="item in highwayOptions" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
            </el-form-item>
            <el-form-item label="起点桩号">
                <el-row class="filter-stake">
                    <el-col :span="12" class="start-stake">
                        <el-input v-model="demandForm.startStake1" clearable type="number" oninput="if(value.length > 3) value = value.slice(0, 3)" @keydown.native="onKeydown($event)">
                            <template slot="prepend">K</template>
                        </el-input>
                    </el-col>
                    <el-col :span="12" class="end-stake">
                        <el-input v-model="demandForm.startStake2" clearable type="number" oninput="if(value.length > 3) value = value.slice(0, 3)" @keydown.native="onKeydown($event)">
                            <template slot="prepend">+</template>
                        </el-input>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="终点桩号">
                <el-row class="filter-stake">
                    <el-col :span="12" class="start-stake">
                        <el-input v-model="demandForm.endStake1" clearable type="number" oninput="if(value.length > 3) value = value.slice(0, 3)" @keydown.native="onKeydown($event)">
                            <template slot="prepend">K</template>
                        </el-input>
                    </el-col>
                    <el-col :span="12" class="end-stake">
                        <el-input v-model="demandForm.endStake2" clearable type="number" oninput="if(value.length > 3) value = value.slice(0, 3)" @keydown.native="onKeydown($event)">
                            <template slot="prepend">+</template>
                        </el-input>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="路面类型">
                <el-select v-model="demandForm.pavementType" placeholder="请选择" clearable style="width: 100%">
                    <el-option v-for="d in RoadTypeOptions" :key="d.value" :label="d.label" :value="d.label" />
                </el-select>
            </el-form-item>
            <el-form-item label="方向">
                <el-select v-model="demandForm.direction" placeholder="请选择" clearable style="width: 100%">
                    <el-option v-for="d in DirectionOptions" :key="d.value" :label="d.label" :value="d.label" />
                </el-select>
            </el-form-item>
            <el-form-item label="车道">
                <el-select v-model="demandForm.lane" placeholder="请选择" clearable style="width: 100%">
                    <el-option v-for="item in DrivewayTypeOptions" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <BaseButton v-permission="{ btnCode: 'dlyh_c58_d257_2' }" @click="handleFilter">查询</BaseButton>
                <BaseButton v-permission="{ btnCode: 'dlyh_c58_d257_2' }" type="second" @click="resetConditions">重置</BaseButton>
            </el-form-item>
        </el-form>
        <DemandSummaryMileage v-if="activeName==1 && tabSelected==1" :bar-data="demandSummaryList" />
        <DemandSummaryFee v-if="activeName==1 && tabSelected==2" :bar-data="demandSummaryList" />
        <QualityLine v-if="activeName==2" :indicator="subForm.indicator" :line-data="list" />
        <DemandRoadMileage v-if="activeName==3 && tabSelected==1" :bar-data="demandRoadList" />
        <DemandRoadFee v-if="activeName==3 && tabSelected==2" :bar-data="demandRoadList" />
        <el-form v-if="activeName==3" :inline="true" size="medium" label-width="78px" @submit.native.prevent>
            <el-form-item label="分析年度">
                <el-date-picker v-model="roadForm.analyseYear" type="year" format="yyyy" value-format="yyyy" :clearable="false" placeholder="请选择" :picker-options="datePickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="公路">
                <!-- <AssetsRoadSelect :value.sync="roadForm.highwayCode" clearable placeholder="请选择" /> -->
                <el-select v-model="highwayCode2" placeholder="请选择" filterable clearable style="width: 100%" @change="highwayCodeChange2">
                    <el-option v-for="item in highwayOptions" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <BaseButton v-permission="{ btnCode: 'dlyh_c58_d257_2' }" @click="handleFilter">查询</BaseButton>
            </el-form-item>
        </el-form>
        <BaseTable v-if="activeName==1" v-loading="listLoading" :columns="demandSummaryColumns" :data="demandSummaryList" row-key="id" height="calc(100% - 570px)" highlight-current-row border>
        </BaseTable>
        <BaseTable v-if="activeName==2" v-loading="listLoading" :columns="columns" :data="list" row-key="id" height="calc(100% - 620px)" highlight-current-row border>
        </BaseTable>
        <BaseTable v-if="activeName==3" v-loading="listLoading" :columns="demandRoadColumns" :data="demandRoadList" row-key="id" height="calc(100% - 570px)" highlight-current-row border>
            <template #highwayName="{ scope: { row } }">
                <span>{{ row.highwayCode+'/'+row.highwayName }}</span>
            </template>
        </BaseTable>
        <Pagination v-if="activeName==3" class="road-pagination" :current-page.sync="page.pageNo" :page-size.sync="page.pageSize" :total="total" @current-change="getList" @size-change="getList" />
        <div v-if="activeName==4" class="statistic">
            <span class="desc">总长度（不包含日养护）：{{ demandTopForm.maintMileage || '-' }} </span>
            <span class="desc">结构性修复（公里）：{{ demandTopForm.structureMaintMileage || '-' }} </span>
            <span class="desc">功能性修复（公里）：{{ demandTopForm.functionMaintMileage || '-' }} </span>
            <span class="desc">预防性养护（公里）：{{ demandTopForm.preventionMaintMileage || '-' }} </span>
            <span class="desc">日常养护（公里）：{{ demandTopForm.dailyMaintMileage || '-' }} </span>
            <span class="desc">方案一总费用（万元）：{{ demandTopForm.programmeCostSum1 || '-' }} </span>
            <span class="desc">方案二总费用（万元）：{{ demandTopForm.programmeCostSum2 || '-' }} </span>
            <span class="desc">方案三总费用（万元）：{{ demandTopForm.programmeCostSum3 || '-' }}</span>
        </div>
        <BaseTable v-if="activeName==4" v-loading="listLoading" :columns="demandColumns" :data="demandList" row-key="id" height="calc(100% - 410px)" highlight-current-row border>
            <template #highwayName="{ scope: { row } }">
                <span>{{ row.highwayCode+'/'+row.highwayName }}</span>
            </template>
        </BaseTable>
        <Pagination v-if="activeName==4" class="bottom-pagination" :current-page.sync="page.pageNo" :page-size.sync="page.pageSize" :total="total" @current-change="getList" @size-change="getList" />
    </div>
</template>

<script>
import { DemandAnalysisModel, DecisionItemModel, ManagementOfficeModel, LineHighwayModel, RoadSectionSelectModel } from '@/models'
import QualityLine from './components/QualityLine'
import DemandSummaryMileage from './components/DemandSummaryMileage'
import DemandSummaryFee from './components/DemandSummaryFee'
import DemandRoadMileage from './components/DemandRoadMileage'
import DemandRoadFee from './components/DemandRoadFee'

import { DirectionOptions } from '@/config/constants'
import { DrivewayTypeOptions } from '@/views/auxiliary-decision/constants'
import { RoadTypeOptions, TechnicalIndexOptions, DataRangeOptions } from '@/views/technical-evaluation/constants'

// const nowYear = new Date().getFullYear().toString() + '年路网检测'
const nowYear = new Date().getFullYear().toString()
export default {
    components: {
        QualityLine,
        DemandSummaryMileage,
        DemandSummaryFee,
        DemandRoadMileage,
        DemandRoadFee
    },
    props: {

    },
    data() {
        return {
            model: new DemandAnalysisModel(),
            decisionItemModel: new DecisionItemModel(),
            managementOfficeModel: new ManagementOfficeModel(),
            lineHighwayModel: new LineHighwayModel(),
            roadSectionSelectModel: new RoadSectionSelectModel(),
            highwayCode: '',
            highwayCode1: '',
            highwayCode2: '',
            activeName: '1',
            tabSelected: '1',
            form: {
                detectionBatch: '',
                trafficModel: '',
                decisionItemId: ''
            },
            subForm: {
                highwayCode: '',
                startStake1: '',
                startStake2: '',
                endStake1: '',
                endStake2: '',
                direction: '',
                lane: '',
                indicator: 'PQI',
            },
            roadForm: {
                analyseYear: nowYear,
                highwayCode: ''
            },
            demandForm: {
                analyseYear: nowYear,
                highwayCode: '',
                orgName: '',
                startStake1: '',
                startStake2: '',
                endStake1: '',
                endStake2: '',
                detectionType: '',
                direction: '',
                pavementType: '',
                roadType: '',
                lane: '',
            },
            DirectionOptions,
            DrivewayTypeOptions,
            TechnicalIndexOptions: [
                {
                    value: 1,
                    label: 'PQI'
                },
                {
                    value: 2,
                    label: 'PCI'
                },
                {
                    value: 3,
                    label: 'RQI'
                },
                {
                    value: 4,
                    label: 'RDI'
                },
                {
                    value: 7,
                    label: 'SRI'
                }
            ],
            RoadTypeOptions,
            options: [],
            managementOfficeOptions: [],
            highwayOptions: [],
            detectionBatchOptions: [],
            trafficoptions: [
                {
                    value: 1,
                    label: '固定值'
                },
                {
                    value: 2,
                    label: '按公式'
                }
            ],
            listLoading: false,
            list: [],
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            total: 0,
            datePickerOptions: {
                // disabledDate(date) {
                //     return date.getFullYear() < new Date().getFullYear()
                // }
            },
            demandTopForm: {},
            demandList: [],
            demandSummaryList: [],
            demandRoadList: [],
            demandRoadColumns: Object.freeze([
                {
                    slot: 'highwayName',
                    attrs: {
                        prop: 'highwayName',
                        label: '路线编号/ 名称',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'maintMileage',
                        label: '养护里程（km）',
                        'show-overflow-tooltip': true,
                        // 'min-width': '150'
                    }
                },
                {
                    attrs: {
                        prop: 'maintCost',
                        label: '养护费用（万元）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'dailyMaintMileage',
                        label: '日常养护里程（公里）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'dailyMaintCost',
                        label: '日常养护费用（万元）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'structureMaintMileage',
                        label: '结构性修复里程（公里）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'structureMaintCost',
                        label: '结构性修复费用（万元）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'functionMaintMileage',
                        label: '功能性修复里程（公里）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'functionMaintCost',
                        label: '功能性修复费用（万元）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'preventionMaintMileage',
                        label: '预防性养护里程（公里）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'preventionMaintCost',
                        label: '预防性养护费用（万元）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                }
            ]),
            demandSummaryColumns: Object.freeze([
                {
                    attrs: {
                        prop: 'year',
                        label: '预测年度',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'maintMileage',
                        label: '养护里程（km）',
                        'show-overflow-tooltip': true,
                        // 'min-width': '150'
                    }
                },
                {
                    attrs: {
                        prop: 'maintCost',
                        label: '养护费用（万元）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'dailyMaintMileage',
                        label: '日常养护里程（公里）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'dailyMaintCost',
                        label: '日常养护费用（万元）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'structureMaintMileage',
                        label: '结构性修复里程（公里）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'structureMaintCost',
                        label: '结构性修复费用（万元）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'functionMaintMileage',
                        label: '功能性修复里程（公里）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'functionMaintCost',
                        label: '功能性修复费用（万元）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'preventionMaintMileage',
                        label: '预防性养护里程（公里）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'preventionMaintCost',
                        label: '预防性养护费用（万元）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                }
            ]),
            demandColumns: Object.freeze([
                {
                    attrs: {
                        prop: 'maintYear',
                        label: '年度',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    slot: 'highwayName',
                    attrs: {
                        prop: 'highwayName',
                        label: '路线编码/名称',
                        'show-overflow-tooltip': true,
                        'min-width': '150'
                    }
                },
                {
                    attrs: {
                        prop: 'startStakeNo',
                        label: '起点桩号',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'endStakeNo',
                        label: '终点桩号',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'length',
                        label: '长度（公里）',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'direction',
                        label: '方向',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'lane',
                        label: '车道',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'orgName',
                        label: '管养单位',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                // {
                //     attrs: {
                //         prop: 'lane',
                //         label: '分中心',
                //         'show-overflow-tooltip': true,
                //         width: '120'
                //     }
                // },
                {
                    attrs: {
                        prop: 'pavementType',
                        label: '路面类型',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'pqi',
                        label: 'PQI',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'pci',
                        label: 'PCI',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'rqi',
                        label: 'RQI',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'rdi',
                        label: 'RDI',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'sri',
                        label: 'SRI',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'programme1',
                        label: '方案一名称',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'programmeCost1',
                        label: '方案一费用（万元）',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'programme2',
                        label: '方案二名称',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'programmeCost2',
                        label: '方案二费用（万元）',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'programme3',
                        label: '方案三名称',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'programmeCost3',
                        label: '方案三费用（万元）',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                }
            ]),
            columns: Object.freeze([
                {
                    attrs: {
                        prop: 'year',
                        label: '年度',
                        'show-overflow-tooltip': true,
                        // 'min-width': '150'
                    }
                },
                {
                    attrs: {
                        prop: 'excellent',
                        label: '优（km）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'good',
                        label: '良（km）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'middle',
                        label: '中（km）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'secondRate',
                        label: '次（km）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'bad',
                        label: '差（km）',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                }
            ]),
        }
    },
    computed: {

    },
    watch: {

    },
    created() {
        this.getDecisionList()
        this.getManagementOfficeList()
        this.getHighwayList()
        this.getDetectionBatchList()
    },
    mounted() {

    },
    methods: {
        getDetectionBatchList() {
            this.roadSectionSelectModel
                .detectionBatchList({})
                .then((res) => {
                    this.detectionBatchOptions = (res.list || []).map(item => {
                        return {
                            value: item,
                            label: item
                        }
                    })
                    this.form.detectionBatch = this.detectionBatchOptions[0].label
                })
        },
        getDecisionList() {
            this.decisionItemModel
                .getList({}, {pageNo: 1, pageSize: 10000})
                .then((res) => {
                    this.options = (res.list || []).map(item => {
                        return {
                            value: item.id,
                            label: item.decisionItemName
                        }
                    })
                })
        },
        // 获取管理处列表，作为下拉选项
        getManagementOfficeList() {
            this.managementOfficeModel.getList({}, { pageNo: 1, pageSize: 10000 }).then(res => {
                this.managementOfficeOptions = (res.list || []).map(item => {
                    return {
                        value: item.id,
                        label: item.name
                    }
                })
            })
        },
        getHighwayList() {
            this.lineHighwayModel.getList({}, { pageNo: 1, pageSize: 10000 }).then(res => {
                this.highwayOptions = (res.list || []).map(item => {
                    return {
                        label: item.code + '/' + item.name,
                        value: item.code
                    }
                })
            })
        },
        highwayCodeChange() {
            this.demandForm.highwayCode = this.highwayCode.split('/')[0]
            this.demandForm.highwayName = this.highwayCode.split('/')[1]
        },
        highwayCodeChange1() {
            this.subForm.highwayCode = this.highwayCode1.split('/')[0]
            this.subForm.highwayName = this.highwayCode1.split('/')[1]
        },
        highwayCodeChange2() {
            this.roadForm.highwayCode = this.highwayCode2.split('/')[0]
            this.roadForm.highwayName = this.highwayCode2.split('/')[1]
        },
        handleClick(tab, event) {
            // console.log(tab.name, this.activeName)
            this.getList()
        },
        getList() {
            switch (this.activeName) {
                case '1':
                    this.requirementSummary()
                    break
                case '2':
                    this.maintQuality()
                    break
                case '3':
                    this.lineRequirementSummary()
                    break
                case '4':
                    this.requirementDetailList()
                    break
            }
        },
        // 需求明细
        requirementDetailList() {
            const { startStake1, startStake2, endStake1, endStake2 } = this.demandForm
            const startStakeNo = startStake1 && startStake2 ? `K${startStake1}+${startStake2}` : ''
            const endStakeNo = endStake1 && endStake2 ? `K${endStake1}+${endStake2}` : ''
            this.listLoading = true
            this.model
                .requirementDetailList({...this.form, ...this.demandForm, startStakeNo, endStakeNo})
                .then((res) => {
                    this.demandList = (res.list || [])
                    this.total = res.totalCount
                    const {maintMileage, dailyMaintMileage, structureMaintMileage, functionMaintMileage, preventionMaintMileage, programmeCostSum1, programmeCostSum2, programmeCostSum3} = res
                    this.demandTopForm = {maintMileage, dailyMaintMileage, structureMaintMileage, functionMaintMileage, preventionMaintMileage, programmeCostSum1, programmeCostSum2, programmeCostSum3}
                }).catch(err => {
                    console.log(err)
                    this.demandList = []
                    this.total = 0
                    this.demandTopForm = {}
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        // 养护质量
        maintQuality() {
            const { startStake1, startStake2, endStake1, endStake2 } = this.subForm
            const startStakeNo = startStake1 && startStake2 ? `K${startStake1}+${startStake2}` : ''
            const endStakeNo = endStake1 && endStake2 ? `K${endStake1}+${endStake2}` : ''
            this.listLoading = true
            this.model
                .maintQuality({...this.form, ...this.subForm, startStakeNo, endStakeNo})
                .then((res) => {
                    this.list = (res || [])
                }).catch(err => {
                    console.log(err)
                    this.list = []
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        // 需求汇总
        requirementSummary() {
            this.listLoading = true
            this.model
                .requirementSummary({...this.form})
                .then((res) => {
                    this.demandSummaryList = (res || [])
                }).catch(err => {
                    console.log(err)
                    this.demandSummaryList = []
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        // 各路线需求明细
        lineRequirementSummary() {
            this.listLoading = true
            this.model
                .lineRequirementSummary({...this.form, ...this.roadForm})
                .then((res) => {
                    this.demandRoadList = (res.list || [])
                    this.total = res.totalCount
                }).catch(err => {
                    console.log(err)
                    this.demandRoadList = []
                    this.total = 0
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        // 查询
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        handleReset() {
            this.subForm = {
                highwayCode: '',
                startStake1: '',
                startStake2: '',
                endStake1: '',
                endStake2: '',
                direction: '',
                lane: '',
                indicator: 'PQI',
            }
            this.highwayCode1 = ''
            this.getList()
        },
        resetConditions() {
            this.demandForm = {}
            this.highwayCode = ''
            this.getList()
        },
        onKeydown(e) {
            if (e.key === 'e' || e.key === '-' || e.code === 'Minus') {
                e.preventDefault()
            }
        }
    },
}
</script>

<style scoped lang="scss">
.page-container {
    position: relative;
    width: 100%;
    min-height: 100%;
    overflow-y: auto;
    border: 1px solid #f0f4f7;
    box-shadow: 0px 0px 4px 0px rgba(131, 145, 178, 0.14);
    padding: 24px 16px;
    ::v-deep .el-tabs__nav-wrap::after {
        background-color: transparent;
    }
    .total-stake {
        width: 500px !important;
    }
    .filter-stake {
        width: 203px;
        ::v-deep {
            .el-input__inner,
            .el-input {
                min-width: auto !important;
                line-height: 1px !important;
            }
            .el-input-group__append,
            .el-input-group__prepend {
                padding: 0 8px;
                color: #44444f;
            }
        }
        .start-stake {
            position: relative;
            z-index: 1;
            margin-right: -1px;
            ::v-deep {
                .el-input__inner,
                .el-input {
                    border-radius: 0;
                }
            }
        }
        .end-stake {
            ::v-deep {
                .el-input-group__append,
                .el-input-group__prepend {
                    border-radius: 0;
                }
            }
        }
    }
    .bottom-pagination {
        position: absolute;
        bottom: 24px;
        right: 24px;
    }
    .road-pagination {
        display: flex;
        justify-content: flex-end;
        margin-top: 16px;
    }
    .statistic {
        background-color: rgba(0, 98, 255, 0.168627450980392);
    }
    .desc {
        margin-right: 16px;
    }
}
</style>
